<template>
  <div>
    <div>
      <span style="margin-right: 10px">时间范围</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button
        @click="clickSelect"
        style="margin-left: 10px"
        size="medium"
        type="primary"
        >查询</el-button
      >
    </div>
    <el-card class="box-card" style="margin-top: 20px; background-color: #fff">
      <div id="main" style="width: 1000px; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ordertotal } from "@/apis/echartsData";
import { getChinaTime } from "@/utils/utils";
export default {
  data() {
    return {
      date: "",
    };
  },
  mounted() {
    this.draw();
  },

  methods: {
    draw() {
      this.myChart = echarts.init(document.getElementById("main"));

      ordertotal({
        date: JSON.stringify(this.date),
      }).then((res) => {
        // console.log(res.data.data);
        let xDate = [];
        let yDate = [];

        for (let obj of res.data.data) {
          // obj.orderTime = getChinaTime(obj.orderTime);
          // console.log(obj.orderTime);
          xDate.push(getChinaTime(obj.orderTime));
          yDate.push(obj.orderAmount);
        }

        this.myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["订单金额"],
          },
          xAxis: [
            {
              type: "category",
              data: xDate,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "{value} ￥",
              },
            },
          ],
          series: [
            {
              name: "订单金额",
              type: "bar",
              data: yDate,
            },
          ],
        });
      });
    },

    clickSelect() {
      // console.log(this.date);
      this.draw();
    },
  },
};
</script>

<style lang="less" scoped>
</style>